<template>
  <view
    class="border-radius-4"
    @touchstart="touchHandler(true)"
    @touchend="touchHandler()"
    @tap.stop="touch"
    hover-class="cell-hover"
    :hover-stay-time="50"
  >
    <slot></slot>
  </view>
</template>

<script lang="ts" setup>
  import { throttle } from '@/utils/common'
  import { ref } from 'vue'

  const active = ref(false)

  defineProps({
    bgColor: {
      type: String,
      default: () => 'rgba(0,0,0,0.1)',
    },
  })
  const emit = defineEmits(['feedTap'])

  const touchHandler = function (bool = false) {
    active.value = bool
  }

  const touch = throttle(function () {
    // 手机短振动
    uni.vibrateShort({})
    emit('feedTap')
    active.value = false
  }, 2000)
</script>

<style scoped lang="scss">
  .cell-hover {
    background: #fafafa;
  }
</style>
